<script setup lang="ts">
import { RouteRecordRaw } from "vue-router";
import { onMounted } from "vue";
// 做类型限制，解决ts类型报错
type CustomRouteRecordRaw = RouteRecordRaw & {
  meta: {
    isShow?: boolean;
  };
};
defineOptions({
  name: "aigcMenuItem",
});
const props = defineProps({
  // 拿到父组件传递过来的路由列表进行渲染
  routerList: {
    type: Array as () => CustomRouteRecordRaw[],
    required: true,
  },
  parentPath: {
    type: String,
  },
});
onMounted(() => {
  console.log();
});
</script>
<template>
  <template v-for="item in props.routerList" :key="item.path">
    <!-- 当该菜单项有子菜单时 -->
    <el-sub-menu
      :index="item.path"
      v-if="item.children && item.children.length > 0"
    >
      <template #title v-if="item.meta.icon">
        <!-- 采用框架自带 -->
        <el-icon><component :is="item.meta.icon" /></el-icon>
        <!-- 菜单项名称，在路由中定义好 -->
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 若路由中未定义菜单项icon，则仅展示名称--（我的仅一级菜单有图标） -->
      <template #title v-else>{{ item.meta.title }}</template>

      <!-- 递归遍历-自己调用自己（核心代码） -->
      <aigc-menu-item
        :routerList="( item.children as CustomRouteRecordRaw[])"
        :parentPath="
          props.parentPath ? props.parentPath + '/' + item.path : item.path
        "
      />
    </el-sub-menu>

    <!-- 当前菜单项无子菜单 -->
    <el-menu-item
      :index="props.parentPath ? props.parentPath + '/' + item.path : item.path"
      v-else
    >
      <!-- 与上面注释大致相同，不多做额外注释 -->
      <template v-if="item.meta.icon">
        <!-- 采用框架自带icon -->
        <el-icon><component :is="item.meta.icon" /></el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <template v-else>
        {{ item.meta.title }}
      </template>
    </el-menu-item>
  </template>
</template>

<style scoped lang="scss">
.is-active {
  font-weight: 700;
}

.el-menu-item,::v-deep(.el-sub-menu__title){
  &:hover {
    font-weight: 700;
    /**background-color: #efeefd;**/
  }
  .el-icon {
    font-size: 19px;
  }

  font-size: 14px;
}


.el-menu--collapse {
  .el-menu-item {
    justify-content: center;
  }
}
</style>
